<template>
  <div class="reply-box">
    <form @submit.prevent="submit">
      <div class="text"><textarea :placeholder="loginname ? '@' + loginname : '发表你的看法...'" v-model="content"></textarea></div>
      <div flex="main:right">
        <div class="msg"></div>
        <div flex-box="0"> <button class="btn">{{ btnname }}</button> </div>
      </div>
    </form>
  </div>
</template>
<script>
  import utils from 'utils'
  import http from 'http'
  import { mapModules } from 'vuet'

  export default {
    mixins: [
      mapModules({ topic: 'topic-detail', self: 'user-self' })
    ],
    props: {
      replyId: { // 评论的评论id，如果没有则是对主题的评论
        type: String,
        default: ''
      },
      loginname: { // @ Ta
        type: String,
        default: ''
      }
    },
    data () {
      return {
        btnname: '回复',
        content: ''
      }
    },
    methods: {
      async submit () { // 提交
        if (!this.content) return utils.toast('请输入回复内容')
        this.btnname = '回复中...'
        var { replyId, content, loginname } = this
        var { id } = this.$route.params
        if (replyId) {
          //content = `[@${loginname}](/user/${loginname}) ${content}`
          content = `@${loginname} ${content}`
        }
		var m_content = content

        try {
          const { success, error_msg } = await http.post(`/topic/${id}/replies`, { replyId, content })
          this.btnname = '回复'
          if (success) {
            this.content = ''
            this.$emit('success')
            this.topic.commentId = null

			
          } else {
            utils.toast(error_msg)
          }
        } catch (e) {
          console.dir(e)
          this.btnname = '回复失败'
        }

		try {
		  m_content = this.self.loginname.substring(29) + " 留言: \n" + m_content + "\n\n详情链接: \n" + "http://m.doubilol.com/vue-cnode/topic/" + id
          const { success, error_msg } = await http.m_post(`/notify`, { "from":this.self.loginname, "to":id, "content":m_content})
          if (success) {
			console.log("post success")
			
          } else {
          }
        } catch (e) {
          console.dir(e)
        }
      }
    }
  }

</script>
<style lang="less" scoped>
  @import '../../../less/config';
  .reply-box {
    .text {
      padding: 5px 10px;
      margin-bottom: 10px;
      border-radius: 5px;
      border: 1px solid #eee;
      textarea {
        box-sizing: border-box;
        width: 100%;
        line-height: 24px;
        border: none;
        font-size: 13px;
        resize: none;
        &:focus {
          outline: none;
        }
      }
    }
    .btn {
      padding: 5px 30px;
      line-height: 24px;
      border-radius: 5px;
      border: 1px solid darken(@main, 3%);
      font-size: 14px;
      color: #fff;
      background: @main;
      &:focus {
        outline: none;
      }
    }
    .msg {
      padding: 5px 10px;
      line-height: 26px;
      color: red;
    }
  }
</style>
